.title-size {
  font-size: 18px;
  font-weight: bold;
  // letter-spacing: 1px;
  text-align: center;
  color: var(--color-333);
}

.home-page-wrap {
  width: 100%;
  overflow: hidden;

  .wrap-title {
    display: flex;
    align-items: center;
    margin: 8px 0;
    @extend .title-size;

    &:before {
      content: '';
      width: 4px;
      height: 20px;
      margin-right: 10px;
      background: var(--color-primary-green);
      border-radius: 4px;
    }
  }
  .no-data.content {
    margin-top: 0;
    padding-top: 40px;
  }
  :deep(.el-radio-button__inner) {
    line-height: 2px;
  }
  :deep(.el-radio-button:nth-of-type(2)) .el-radio-button__inner {
    // border-left: 1px solid var(--radio-border-color);
    // border-right: 1px solid var(--radio-border-color);
  }
}

.map-wrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
  .map-title {
    margin: 0;
    padding: 15px 0;
    @extend .title-size;
  }
  .map-wrap {
    height: 75vh;
    min-height: 450px;
    padding: 0 2% 10px;
    position: relative;

    .legend-wrap {
      z-index: 9;
      position: absolute;
      top: 15px;
      right: 70px;
      width: 126px;
      font-size: 0;
      padding: 10px 0px 10px 10px;
      background: rgba(255, 255, 255, 0.7);
      @extend .user-select-none;
      .item {
        height: 16px;
        line-height: 16px;
        img {
          width: 12px;
          height: 12px;
        }

        .text {
          font-size: 12px;
        }
      }
    }
    .right-wrap {
      z-index: 9;
      position: absolute;
      right: 70px;
      bottom: 25px;
      width: 450px;
      padding: 10px;
      background: var(--body-theme);
      .deviceChart-head {
        position: relative;
        .title-size {
          margin: 0;
          padding: 4px 0;
        }
        .deviceChart-dayWeek {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .table-top {
        margin-top: 10px;
        .text-hide {
          width: 100px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .dark-color {
          text-align: center;
        }
      }
    }
  }
}
.row-wrap {
  display: flex;
  flex-wrap: wrap;
  :deep(.el-col) {
    display: flex;
    flex-direction: column;
  }
  .chart-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}
.chart-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
  padding: 15px 5px;
  overflow: hidden;
  .box-wrap {
    position: absolute;
    right: 30px;
    top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    :deep(.el-radio-group) {
      margin-left: 8px;
    }
  }
  :deep(.fault-nodata) {
    height: 28vh;
    padding-top: 15px !important;

    img {
      height: 12vh !important;
    }
  }
}
.iot-card-wrap {
  flex: 1;
  display: flex;
  min-height: 240px;
  height: 30vh;
  .title-size {
    margin: 8px 0;
  }
}
.sim-content-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .sum-quantity {
    margin-bottom: 10px;

    .number {
      font-size: 32px;
      color: var(--color-333);
      text-align: center;
    }
  }

  .child-quantity-wrap {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;

    .child-quantity {
      width: 31%;

      .child-item {
        border: 4px solid transparent;
        border-radius: 22px;
        background-color: white;
        overflow: hidden;

        .number {
          padding: 7% 0;
          @extend .light-size;
          text-align: center;
          color: #333;
        }

        .status {
          padding: 10px 0;
          @extend .light-size;
          color: white;
          text-align: center;
        }
      }

      .child-item.unActive {
        border-color: #ff6565;

        .status {
          background-color: #ff6565;
        }
      }

      .child-item.active {
        border-color: #6fba2c;

        .status {
          background-color: #6fba2c;
        }
      }

      .child-item.others {
        border-color: #f49a24;

        .status {
          background-color: #f49a24;
        }
      }
    }
  }
}

footer {
  font-size: 0;
  .text-center {
    margin: 4px 0;
    font-size: 12px;
    text-align: center;
    color: var(--color-333);
  }
  .linkStyle {
    margin-right: 30px;
  }
}
:deep(.amap-info-content) {
  font-size: 12px;
}
